<!--
  #%L
  thinkbig-ui-feed-manager
  %%
  Copyright (C) 2017 ThinkBig Analytics
  %%
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  
      http://www.apache.org/licenses/LICENSE-2.0
  
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  #L%
  -->
<div>

  <card-layout header-css="filter-header" class="centered">

    <header-section>
      <div layout="row" layout-align="center start">
        <div class="card-title">Import Template</div>
        <span flex></span>
        <ng-md-icon icon="file_upload" style="fill:#F08C38;padding-right:16px;" size="30"></ng-md-icon>
      </div>
    </header-section>


    <body-section>


      <div layout="column" class="md-padding">

        <div>
          <div class="item-title">Import one of the following from another environment:</div>
        </div>

        <div class="layout-padding-indent">
          <md-list flex layout-fill class="list-item-table list-condensed">

            <md-list-item>
              <div layout="row" layout-fill>
                <div flex="20" class="md-list-item-text hint">
                  Type
                </div>
                <div flex="10" class="md-list-item-text hint">
                  File type
                </div>
                <div flex="60" class="md-list-item-text hint">
                  Description
                </div>

              </div>
            </md-list-item>


            <md-list-item>
              <div layout="row" layout-fill>
                <div flex="20" class="md-list-item-text ">
                  NiFi template
                </div>
                <div flex="10" class="md-list-item-text ">
                  XML
                </div>
                <div flex="60" class="md-list-item-text ">
                  Imports a NiFi template
                </div>
              </div>
            </md-list-item>
            <md-list-item>
              <div layout="row" layout-fill>
                <div flex="20" class="md-list-item-text ">
                  Kylo template bundle
                </div>
                <div flex="10" class="md-list-item-text ">
                  ZIP
                </div>
                <div flex="60" class="md-list-item-text ">
                  Imports Kylo configuration and NiFi template
                </div>
              </div>
            </md-list-item>
          </md-list>
        </div>

        <div layout="column" style="padding-top:15px;"
             class="layout-padding-indent">
          <upload-file upload-file-model="vm.templateFile"></upload-file>

          <div ng-if="vm.uploadType == 'zip'">
            <!-- validation messages -->
            <div ng-if="vm.templateDataImportOption.errorMessages != null && vm.templateDataImportOption.errorMessages.length >0">
              <div ng-repeat="message in vm.templateDataImportOption.errorMessages" layout="column">
                <div><ng-md-icon icon="warning" size="20" class="warn"></ng-md-icon> <span>{{message}}</span></div>
              </div>
            </div>

            <div ng-if="vm.nifiTemplateImportOption.errorMessages != null && vm.nifiTemplateImportOption.errorMessages.length >0">
              <div ng-repeat="message in vm.nifiTemplateImportOption.errorMessages" layout="column">
                <div><ng-md-icon icon="warning" size="20" class="warn"></ng-md-icon> <span>{{message}}</span></div>
              </div>
            </div>

            <div layout="row" >

            <md-input-container class="condensed-no-float md-block layout-padding-bottom" flex="50" >
              <md-checkbox ng-model="vm.templateDataImportOption.overwrite" aria-label="Overwrite if exists">
                Overwrite
              </md-checkbox>
              <div class="hint" style="margin-top:-10px">
                If a feed template with the same name (as inside the .zip) already exists in NiFi, it will be replaced.
              </div>
            </md-input-container>
              <md-input-container class="condensed-no-float md-block layout-padding-bottom" flex="50" >
                <md-checkbox ng-model="vm.reusableTemplateImportOption.overwrite" aria-label="Overwrite if exists" >
                  Import the reusable template
                </md-checkbox>

                <div class="hint" style="margin-top:-10px">
                  If the archive contains a reusable template it will be imported.  If a reusable template with the same name already exists in NiFi it will be replaced and re-initialized.
                </div>
              </md-input-container>

            </div>

            <div ng-if="vm.templateDataImportOption.properties && vm.templateDataImportOption.properties.length >0 " flex layout="column">
              <div class="layout-padding-bottom">The following properties need to be supplied before importing this feed template</div>

              <div ng-repeat="prop in vm.templateDataImportOption.properties" layout="column" layout-align="start start">
                <span>{{prop.processorName}}</span>
                <div layout="row" flex layout-fill>
                  <md-input-container>
                    <label>{{prop.propertyKey}}</label>
                    <input type="text" ng-model="prop.propertyValue" autocomplete="new-password" name="{{prop.inputName}}">
                  </md-input-container>
                </div>
              </div>
            </div>

            <!-- ask to import reusable template if found -->
            <div ng-if="(vm.templateDataImportOption.overwrite)|| (vm.reusableTemplateImportOption.errorMessages != null && vm.reusableTemplateImportOption.errorMessages.length >0)">
              <div ng-repeat="message in vm.reusableTemplateImportOption.errorMessages" layout="column">
                <div><ng-md-icon icon="warning" size="20" class="warn"></ng-md-icon> <span>{{message}}</span></div>
              </div>

              <div ng-if="vm.reusableTemplateImportOption.properties && vm.reusableTemplateImportOption.properties.length >0" flex layout="column">
                <div class="layout-padding-bottom">The following properties need to be supplied before importing this feed template</div>

                <div ng-repeat="prop in vm.reusableTemplateImportOption.properties" layout="column" layout-align="start start">
                  <span>{{prop.processorName}}</span>
                  <div layout="row" flex layout-fill>
                    <md-input-container>
                      <label>{{prop.propertyKey}}</label>
                      <input type="text" ng-model="prop.propertyValue" autocomplete="new-password" name="{{prop.inputName}}">
                    </md-input-container>
                  </div>
                </div>
              </div>


            </div>


          </div>

          <div ng-if="vm.uploadType == 'xml'"  layout-fill>
            <div ng-if="vm.nifiTemplateImportOption.errorMessages != null && vm.nifiTemplateImportOption.errorMessages.length >0">
              <div ng-repeat="message in vm.nifiTemplateImportOption.errorMessages" layout="column">
                <div><ng-md-icon icon="warning" size="20" class="warn"></ng-md-icon> <span>{{message}}</span></div>
              </div>
            </div>


            <div layout="row">
            <md-input-container class="condensed-no-float md-block layout-padding-bottom" flex="50">
              <md-checkbox ng-model="vm.nifiTemplateImportOption.overwrite" aria-label="Overwrite if exists">
                Overwrite
              </md-checkbox>
              <div class="hint" style="margin-top:-10px">
                Replace any existing template in NiFi that has the same name.
              </div>
            </md-input-container>


            <md-input-container class="condensed-no-float md-block layout-padding-bottom" flex="50">
              <md-checkbox ng-model="vm.reusableTemplateImportOption.shouldImport" aria-label="Create a reusable flow (callable by other flows)">
                Create Reusable Flow
              </md-checkbox>
              <div class="hint" style="margin-top:-10px">
                Create a reusable flow from this template under 'reusable_templates' process group in NiFi. Other feed templates can reuse this template's flow by connecting to it.
              </div>
            </md-input-container>

              <md-input-container class="condensed-no-float md-block layout-padding-bottom" flex="50" ng-if="vm.reusableTemplateImportOption.shouldImport && vm.remoteProcessGroupAware">
                <md-checkbox ng-model="vm.remoteProcessGroupImportOption.shouldImport" aria-label="Make available for Remote Process Groups">
                 Remote Process Group Aware
                </md-checkbox>
                <div class="hint" style="margin-top:-10px">
                 Make this template available for Feed Remote Process Groups
                </div>
              </md-input-container>

            </div>

          </div>

        </div>

        <div layout="row" class="layout-padding-top">
          <md-button class="md-raised md-primary" ng-click="vm.importTemplate();" ng-if="vm.templateFile != null && !vm.reusableTemplateInputPortsNeeded && !vm.remoteProcessGroupInputPortsNeeded"
                     ng-disabled="vm.uploadInProgress">
            Import Template
          </md-button>
          <span flex="5"></span>
          <md-progress-linear flex md-mode="determinate" value="{{vm.uploadProgress}}" ng-if="vm.uploadInProgress"></md-progress-linear>
        </div>

        <div layout="column">
          <div ng-repeat="msg in vm.uploadStatusMessages" layout="row">
            <div flex>
                <span ng-if="msg.complete && msg.success ">
                  <ng-md-icon icon="check" size="20" style="fill:green" ></ng-md-icon>
                </span>
              <span ng-if="msg.complete && !msg.success">
                  <ng-md-icon icon="error" size="20" style="fill:red"></ng-md-icon>
                </span>
              <span>{{msg.message}}</span>
            </div>
          </div>
        </div>



      </div>

      <div ng-if="vm.importResult != null" class="layout-padding-indent layout-padding-top-bottom">
        <div layout="row">
          <ng-md-icon icon="{{vm.importResultIcon}}"
                      ng-style="{'fill':vm.importResultIconColor}"></ng-md-icon>
          <span style="padding-left:15px;">{{vm.message}}</span>
          <span flex></span>
        </div>

        <md-list class="padding-left" ng-repeat="(severity,errors)  in vm.errorMap">
          <md-subheader class="md-warn" ng-if="errors.length >0">Errors</md-subheader>
          <md-list-item class="md-2-line" ng-repeat="error in errors track by $index">
            <div class="md-list-item-text">
              <div ng-if="error.processorName != null && error.processorName != '' "
                   style="color:grey">Processor: {{::error.processorName}}
              </div>
              <div class="md-warn-text">{{::error.message}}</div>
            </div>
            <md-divider ng-if="!$last"></md-divider>
          </md-list-item>
        </md-list>

        <div ng-if="vm.reusableTemplateInputPortsNeeded">

          <div layout="column">
          <ng-form name="vm.importTemplateForm" layout="column">
            <md-subheader class="md-subhead left-aligned">Connection Options</md-subheader>
            <div layout="row" ng-repeat="connection in vm.importResult.reusableTemplateConnections">
              <div layout="column" flex="50">
                <span>Connect From: {{connection.feedOutputPortName}}</span>
              </div>
              <div layout="column" flex="50">
                <md-input-container class="md-block condensed">
                  <md-select name="port-{{connection.feedOutputPortName}}" ng-model="connection.inputPortDisplayName" ng-change="vm.onReusableTemplateConnectionChange(connection)"
                             required>
                    <md-option ng-repeat="inputPort in vm.inputPortList" value="{{inputPort.value}}" ng-disabled="inputPort.disabled">
                        <span>{{inputPort.label}}</span> <span class="hint" ng-if="inputPort.description"> ({{inputPort.description | characters:50}})</span>
                    </md-option>

                  </md-select>
                  <div ng-messages="vm.importTemplateForm['port-'+connection.feedOutputPortName].$error " md-auto-hide="false">
                    <div ng-message="required">This field is required.</div>
                    <div ng-message="invalidConnection">The selected input port is no longer available.</div>
                  </div>
                </md-input-container>
              </div>
            </div>
            <div layout="row" layout-align="start">
              <span flex="100"/>
              <md-button ng-click="vm.cancelImport()">Cancel</md-button>
              <md-button class="md-primary" ng-click="vm.setReusableConnections()" ng-if="!vm.noReusableConnectionsFound">Import</md-button>
            </div>

              <div ng-if="vm.noReusableConnectionsFound">
                ERROR!!!!! There are no other reusable connections found.
                You will need to re import additional templates before registering this one.
              </div>
          </ng-form>
          </div>
        </div>

          <div ng-if="vm.remoteProcessGroupInputPortsNeeded && vm.remoteProcessGroupImportOption.shouldImport">

            <md-list class="padding-left" ng-if="vm.remoteProcessGroupImportOption.errorMessages.length >0">
              <md-subheader class="md-warn">Remote Input Port Errors</md-subheader>
              <md-list-item class="md-2-line" ng-repeat="error in vm.remoteProcessGroupImportOption.errorMessages track by $index">
                <div class="md-list-item-text">
                  <div class="md-warn-text">{{::error}}</div>
                </div>
                <md-divider ng-if="!$last"></md-divider>
              </md-list-item>
            </md-list>

          <div layout="column">

            <ng-form name="vm.importTemplateForm" layout="column">
              <md-subheader class="md-subhead left-aligned">Remote Process Group Input Ports</md-subheader>
              <div ng-if="vm.importResult.remoteProcessGroupInputPortNames.length ==0">
                Please select at least one input port to be available to remote process groups.
                <br/>
                If you dont wish to expose your template to remote process groups uncheck <i>Remote Process Group Aware</i> option above
              </div>

                <md-input-container>
                  <label>Remote Input Ports</label>
                  <md-select multiple ng-model="vm.importResult.remoteProcessGroupInputPortNames" ng-model-options="{trackBy: '$value.inputPortName'}">
                    <md-option ng-repeat="port in vm.remoteProcessGroupInputPortNames" ng-value="port" >
                      {{port.inputPortName}}
                    </md-option>
                  </md-select>
                </md-input-container>

              <div layout="row" layout-align="start">
                <span flex="100"/>
                <md-button ng-click="vm.cancelImport()">Cancel</md-button>
                <md-button class="md-primary" ng-click="vm.setRemoteProcessInputPorts()">Import</md-button>
              </div>


            </ng-form>
          </div>
        </div>






        <!-- reorder -->

        <div ng-if="!vm.xmlType && vm.showReorderList">
          <thinkbig-template-order template-id="vm.importResult.templateId" template-name="vm.importResult.templateName" add-as-new="false" add-save-btn="true"></thinkbig-template-order>
        </div>


      </div>
</body-section>
</card-layout>
</div>
